<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文案生成</title>
    <style>
        body{
            background:linear-gradient(135deg,#b4b9c1,#4780c6);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            padding: 20px;
            box-sizing: border-box;
        }
        .title{
            text-align: center;
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .main-container{
            display: flex;
            justify-content: center;
            gap: 30px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            align-items: flex-start;
        }
        .introduce, .example{
            text-align: center;
            border: 2px dashed #fff;
            padding: 20px;
            border-radius: 10px; 
            color: white;
            flex: 1;
            min-width: 250px;
            transition: all 0.3s ease;
        }
        .introduce:hover, .example:hover{
            background-color: rgba(255,255,255,0.1);
            transform: translateY(-5px);
        }
        .content{
            flex: 1.2;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .input{
            width: 100%;
            height: 65px;
            border-radius: 15px;
            font-size: 25px;
            border: none;
            outline: none;
            padding: 0 15px;
            box-sizing: border-box;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .input:focus{
            box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
        }
        button{
            width: 120px;
            height: 45px;
            border-radius: 15px;
            border: none;
            outline: none;
            background: #4780c6;
            color: white;
            margin-top: 20px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        button:disabled{
            background: #99b9e0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        button:hover:not(:disabled){
            background: #3a6db3;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .selling-points {
            margin-top: 20px;
            color: white;
            width: 100%;
            background-color: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 15px;
            box-sizing: border-box;
        }
        .selling-points h3{
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center;
        }
        .selling-points label{
            display: flex;
            align-items: center;
            margin: 10px 0;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
        }
        .selling-points label:hover{
            background-color: rgba(255,255,255,0.1);
        }
        .selling-points input[type="checkbox"]{
            margin-right: 10px;
            width: 18px;
            height: 18px;
            accent-color: #4780c6;
        }
        .result {
            margin-top: 30px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            width: 100%;
            min-height: 100px;
            display: none;
            box-sizing: border-box;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 18px;
            line-height: 1.5;
        }
        .copy-btn {
            margin-top: 15px;
            width: auto;
            padding: 5px 15px;
            height: auto;
            font-size: 14px;
            background-color: rgba(71, 128, 198, 0.1);
            color: #4780c6;
        }
        /* 加载状态样式 */
        .loading {
            margin-top: 30px;
            color: white;
            font-size: 18px;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        @media (max-width: 900px) {
            .main-container{
                flex-direction: column;
                align-items: center;
            }
            .introduce, .example, .content{
                width: 100%;
                max-width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="title">
        <h1>AI文案生成</h1>
    </div>
    
    <div class="main-container">
        <div class="introduce">
            <h2>产品介绍&使用说明</h2>
            <p>对接免费AI API，智能生成商品文案</p>           
            <p><b>使用说明</b></p>
            <p>1.输入商品名称</p>
            <p>2.选择产品卖点</p>
            <p>3.点击生成</p>
            <p>4.复制使用文案</p>
         </div>
         
        <div class="content">
            <input type="text" class="input" id="productName" placeholder="请输入商品名称（如：无线蓝牙耳机）">
            
            <div class="selling-points">
                <h3>选择产品卖点：</h3>
                <label><input type="checkbox" name="feature" value="质量上乘"> 质量上乘</label>
                <label><input type="checkbox" name="feature" value="价格优惠"> 价格优惠</label>
                <label><input type="checkbox" name="feature" value="设计精美"> 设计精美</label>
                <label><input type="checkbox" name="feature" value="性价比高"> 性价比高</label>
                <label><input type="checkbox" name="feature" value="独家限量"> 独家限量</label>
                <label><input type="checkbox" name="feature" value="环保安全"> 环保安全</label>
            </div>
            
            <button id="generateBtn">生成文案</button>
            <!-- 加载状态（默认隐藏） -->
            <div class="loading" id="loading">
                <div class="loading-spinner"></div>
                <span>AI正在生成文案...</span>
            </div>
            <!-- 结果区域 -->
            <div class="result" id="result">
                <div id="resultText"></div>
                <button class="copy-btn" id="copyBtn">复制文案</button>
            </div>
        </div>
        
        <div class="example">
            <p>言为心声，文以载道。<br><br>
               吾有神器，名曰文案生成。<br><br>
               取汝之意，成吾之文，<br><br>
               传君之名于四海。</p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const generateBtn = document.getElementById('generateBtn');
        const copyBtn = document.getElementById('copyBtn');
        const productNameInput = document.getElementById('productName');
        const resultDiv = document.getElementById('result');
        const resultText = document.getElementById('resultText');
        const loadingDiv = document.getElementById('loading');
        //api路径
        const API_URL = 'https://text.pollinations.ai/';
        
        // 生成文案的核心函数（对接API）
        generateBtn.addEventListener('click', async function() {
            // 收集用户输入
            const productName = productNameInput.value.trim();
            const selectedFeatures = [];
            document.querySelectorAll('input[name="feature"]:checked').forEach(checkbox => {
                selectedFeatures.push(checkbox.value);
            });
            
            // 验证输入
            if (!productName) {
                alert('请输入商品名称！');
                return;
            }
            if (selectedFeatures.length === 0) {
                alert('请至少选择一个产品卖点！');
                return;
            }
            
            // 显示加载状态
            loadingDiv.style.display = 'flex';
            generateBtn.disabled = true;
            resultDiv.style.display = 'none';
            
            try {
                // 拼接AI提示词
                const prompt = `请为以下商品生成6条不同风格的营销文案:
                    商品名称：${productName}
                    核心卖点：${selectedFeatures.join('、')}
                    风格要求：分别为"简洁有力"、"生动活泼"、"温馨亲切"、"高端大气"、"幽默风趣"、"专业严谨"
                    每条300字以内,用序号区分,不要多余内容。`;
                
                // 对提示词进行URL编码
                const encodedPrompt = encodeURIComponent(prompt);
                const response = await fetch(`${API_URL}${encodedPrompt}`);
                
                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status}`);
                }
                
                // 获取并处理AI返回的结果
                const aiText = await response.text();
                // 格式化文本
                resultText.innerHTML = aiText.replace(/\n/g, '<br>');
                resultDiv.style.display = 'block';
                
            } catch (error) {
                // 错误处理
                resultText.textContent = `生成失败: ${error.message}，请稍后重试`;
                resultDiv.style.display = 'block';
                console.error('错误详情：', error);
                
            } finally {
                // 无论成功/失败，都隐藏加载，启用按钮
                loadingDiv.style.display = 'none';
                generateBtn.disabled = false;
            }
        });
        
        // 复制文案功能
        copyBtn.addEventListener('click', async function() {
            const textToCopy = resultText.innerText;
            try {
                await navigator.clipboard.writeText(textToCopy);
                
                // 反馈复制成功
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '复制成功！';
                copyBtn.style.backgroundColor = 'rgba(46, 204, 113, 0.2)';
                copyBtn.style.color = '#2ecc71';
                
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                    copyBtn.style.backgroundColor = '';
                    copyBtn.style.color = '';
                }, 2000);
            } catch (err) {
                alert('复制失败，请手动复制');
                console.error('复制错误:', err);
            }
        });
        
        // 按Enter键快速生成
        productNameInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') generateBtn.click();
        });
    </script>
</body>
</html>
    